<template>
  <div class="common-layout">
    <el-container>

      <el-header class="common-header">
        <!-- 头部标签 -->
        <top></top>
      </el-header>
      <el-container>

        <el-aside class="common-aside" width="200px">
          <!-- 左边标签 -->
          <left-menu></left-menu>
        </el-aside>
        <!-- 主页面标签 -->
        <el-main class="common-main">
     
          <RouterView></RouterView>
        </el-main>

      </el-container>

    </el-container>
  </div>
</template>

<script>
//引入Top 组件
import Top from "@/components/Top.vue";
//引入LeftMenu 组件
import LeftMenu from "@/components/LeftMenu.vue";
//将路由出口导入到本页面中
import { RouterView } from "vue-router";
export default {
  components: { Top, LeftMenu, RouterView },
};

</script>

<style scoped>
/* 页面样式 */
.common-layout,
.el-container {
  width: 100%;
  height: 100%;
}

.common-header {
  background-color: rgb(101, 158, 218);
}

.common-aside {
  background-color: #545c64;
}

.common-main {
  background-image: url(https://images.pexels.com/photos/1108117/pexels-photo-1108117.jpeg?auto=compress&cs=tinysrgb&w=800);
}
</style>